<div class="ddp-pop-meta-detail" style="z-index: 160">
  <!-- popup -->
  <div class="ddp-box-meta" *ngIf="isExistMetadata()">
    <a href="javascript:" class="ddp-btn-close" (click)="onClickCloseBtn()"></a>
    <!-- top -->
    <div class="ddp-pop-top">
      <!-- title -->
      <div class="ddp-ui-title">
        <component-metadata-type-box-tag [metadata]="metadataDetailData"></component-metadata-type-box-tag>
        <span class="ddp-label-title" title="{{metadataDetailData.name}}">{{metadataDetailData.name}}</span>
        <!-- info -->
        <component-explore-data-information [source]="metadataDetailData.source" [sourceType]="metadataDetailData.sourceType"></component-explore-data-information>
        <!-- //info -->
        <em class="ddp-icon-control-fav" [class.ddp-selected]="metadataDetailData.favorite" (click)="onClickFavoriteIconInHeader()"></em>
        <div class="ddp-data-name">
          by <span class="ddp-txt-name type-line-none" (click)="onClickCreatedBy()">{{metadataDetailData.createdBy.fullName}}</span>
        </div>
      </div>
      <!-- //title -->
      <!-- right -->
      <div class="ddp-right">
        <a href="javascript:" class="ddp-btn-pop" (click)="onClickEditData()" *ngIf="isManagerAuth()">{{'msg.explore.btn.detail.edit.data'| translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" *ngIf="isShowCreateWorkbench()" (click)="onClickCreateWorkbench()"><em class="ddp-icon-add2"></em>{{'msg.explore.btn.detail.make.bench'| translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" *ngIf="isShowCreateWorkbook()" (click)="onClickCreateWorkbook()"><em class="ddp-icon-add2"></em>{{'msg.explore.btn.detail.make.book'| translate}}</a>
      </div>
      <!-- //right -->

    </div>
    <!-- //top -->

    <div class="ddp-detail-contents">
      <!-- tab -->
      <div class="ddp-wrap-tab">
        <ul class="ddp-ui-tab ddp-clear">
          <li *ngFor="let tab of tabs" [class.ddp-selected]="selectedTab === tab.id"
              (click)="onClickTab(tab)">
            <a href="javascript:">{{tab.value}}</a>
          </li>
        </ul>
      </div>
      <!-- //tab -->
      <explore-metadata-overview
        *ngIf="selectedTab === 0"
        [metadata]="metadataDetailData"
        (clickedTopUser)="onClickTopUser($event)"
        [topUserList]="topUserList"
        [recentlyUpdatedList]="recentlyUpdatedList"
        [recentlyQueriesForDataBase]="recentlyQueriesForDataBase"
        [recentlyUsedDashboardList]="recentlyUsedDashboardList"></explore-metadata-overview>
      <explore-metadata-columns
        *ngIf="selectedTab === 1"
        [metadata]="metadataDetailData"
        [metadataId]="metadataId"></explore-metadata-columns>
      <explore-metadata-sample-data
        [metadata]="metadataDetailData"
        *ngIf="selectedTab === 2"></explore-metadata-sample-data>
    </div>
  </div>
  <!-- //popup -->
</div>

<ng-template #component_create_workbench></ng-template>
<ng-template #component_create_workbook></ng-template>
<ng-template #component_confirm></ng-template>
